<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title Page</title>

    <!-- Bootstrap CSS -->
    <link href="./lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="./lib/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src=".//lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <link href="./lib/dist/summernote.css" rel="stylesheet">
    <script src="./lib/dist/summernote.js"></script>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>


    <div class="container" id="articleDetailApp">
        <h3 class="text-center">detail</h3>


        <form action="" method="POST" role="form">
            <button type="button" @click="fnUpdate()" class="btn btn-primary">save</button>

            <div class="form-group">
                <label for="">title</label>
                <input type="text" class="form-control" v-model="article.title">
            </div>




        </form>

        <div id="summernote">
            <p>Hello Summernote</p>
        </div>
    </div>



</body>

</html>


<script src="./lib/vue.min.js"></script>

<script src="./global.js"></script>
<script>

    var vm = new Vue({
        el: '#articleDetailApp',
        data: {


            article: {}
        },
        methods: {


            getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); return null;
            },


            details: function () {
                return this.site + " - 学的不仅是技术，更是梦想！";
            },




            fnGetDetail(sid) {

                var that = this;
                fetch(`${config.remoteUrl}/noteArticles/${sid}`)
                    .then(function (response) {
                        return response.json();
                    })
                    .then(function (myJson) {
                        if (myJson.code == 0) {
                            //that.cateList = myJson.dat.content;
                            that.article = myJson.dat;
                            // console.log(that.article);

                            var markupStr = that.article.text;
                            $('#summernote').summernote('code', markupStr);
                        }
                    });
            },

            fnUpdate() {


                var that = this;

                var markupStr = $('#summernote').summernote('code');

                this.article.text = markupStr;

                fetch(`${config.remoteUrl}/noteArticles`, {
                    body: JSON.stringify(this.article),
                    method: 'PUT',
                    mode: 'cors',
                    headers: {
                        'content-type': 'application/json',
                    }

                })
                    .then(function (response) {
                        return response.json();
                    })
                    .then(function (myJson) {

                        if (myJson.code == 0) {

                            alert('ok');
                        }
                    });


            }



        },
        mounted() {

            var $summernote = $('#summernote').summernote({
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'underline', 'clear']],
                    ['fontname', ['fontname']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen', 'codeview', 'help']],
                    ['fontsize', ['fontsize']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['height', ['height']]
                ],
                tabsize: 2,
                minHeight: 400,
                callbacks: {
                    onImageUpload: function (files, editor, $editable) {

                        var data = new FormData();
                        data.append('file', files[0]);

                        fetch(`${config.remoteUrl}/files/upload`, {
                            method: 'POST',
                            body: data
                        }).
                            then(function (response) {
                                return response.json();
                            })
                            .then(function (myJson) {
                                if (myJson.code == 0) {
                                    $summernote.summernote('insertImage', `${config.remoteUrl}/uploads/` + myJson.dat.aac002);

                                }
                            });

                    }
                }

            });

            var sid = this.getUrlParam('sid');
            if (!sid) {
                alert('bug');
            } else {

                this.fnGetDetail(sid);
            }


        },
    });

</script>